<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<!DOCTYPE HTML >
<html>
  <head>
    <title>gy云锁</title>


      <script src="jquery-3.3.1\jquery-3.3.1.js"></script>
      <script>
          var isLoaded = false;
          var  locki;
          var roomss;
          var roomNumber;
          var roomjson;
          var apartmentsmap;
          var floor;
          var aa=1;
          //获取json长度方法
		function getJsonLength(jsonData){  
		    var jsonLength = 0;  
		    for(var item in jsonData){  
		        jsonLength++;  
		    }  
		    return jsonLength;  
		}   
		
          //获取锁
          function locks(opts) {
              $.ajax({
                  type: 'get',
                  url: "OpenLockHandler/getlock",
                  timeout:3000,

                  beforeSend: function() {
                      isLoaded = false;
                  },

                  success: function(data) {
                      //console.log(data);

                      //alert(data);
                      var data2 = eval(data);
                      for(locki in data2)
                      {
//alert(data2[i].name);
						var op=1;
						
							//console.log("ul[id^='\"+op+);
                          //console.log(data2[locki].lSupplier);//返回？？
                      }

                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                      console.log('请求失败~');
                  }
              });
          }
          locks({"init": 1});
          setInterval(function() {
              isLoaded && locks({"init": 0});
          }, 1500);
            //获取房间数
          function rooms(opts) {
              $.ajax({
                  type: 'get',
                  url: "OpenLockHandler/getroom",
                  timeout:3000,

                  beforeSend: function() {
                      isLoaded = false;
                  },

                  success: function(data) {
                    //console.log(data);
					//json对象----- >>字符串
					//JSON.stringify(obj)
					//json字符串------>>json对象
					//JSON.parse(string)
                      //alert(data);
                      roomss = data
                   roomjson = JSON.parse(roomss)
                 // console.log(rooms+"+-++--+--");
                  	console.log(roomjson[1].rNum+"*-*-*-");
                  
                  	if(aa==1)
                  	{
					roomNumber=	getJsonLength(JSON.parse(data));
					aa=0;
					}
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                      console.log('请求失败~');
                  }
              });
          }
          rooms({"init": 1});
          setInterval(function() {
              isLoaded && rooms({"init": 0});
          }, 1500);
        //获取栋map
          function apartment(opts) {
              $.ajax({
                  type: 'get',
                  url: "OpenLockHandler/getApartment",
                  timeout:3000,

                  beforeSend: function() {
                      isLoaded = false;
                  },

                  success: function(data) {
                      
                    	// var apartmentstr = eval(data);
                    var apartmentstr =data;
                   
                    var apartmentstr =  eval('(' + apartmentstr + ')');
                  //   console.log(apartmentstr+"**+***");
                    //console.log(apartmentstr[''+1+'']+"++++");
                      apartmentsmap=apartmentstr;
                     // console.log(apartmentsmap.length+"++++");
						
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                  apartments=[0];
                      console.log('请求失败~');
                  }
              });
          }
          apartment({"init": 1});
          setInterval(function() {
              isLoaded && apartment({"init": 0});
          }, 1500)
          
          //刷新表单信息
           function userinfos(opts) {
              $.ajax({
                 type: "post",
                  url: "UserinfoHandler/selectUserinfo",
                  data:  "uNum=50506",
                  dateType : "json",
                  timeout:3000,

                  beforeSend: function() {
                      isLoaded = false;
                  },

                  success: function(data) {
                      //roomssa = data
                      // console.log(data+"+-++--+--");
                  // var data = JSON.parse(data)
                  //var data =  eval('(' + data + ')');
                 // console.log(data.uName+"+-++--+--");
                  	//console.log(data.uIdc+"%^%^%");
                  	//var uName=data.uName;
                  	if(data!="0"){
                  	$("#uid2").val(data.uId);
                  	$("#uName2").val(data.uName);
                  	$("#uGenre2").val(data.uGenre);
                  	var a=data.uGenre;
                  	$("input:radio[id='uGenre2'][value='"+a+"']").attr('checked','true');
                  	var b=data.uGender;
                  	$("input:radio[id='uGender2'][value='"+b+"']").attr('checked','true');
                  	$("#uIdc2").val(data.uIdc);
                  	$("#uPhone2").val(data.uPhone);
                  	$("#uRemark2").val(data.uRemark);
                  	$("#uMoney2").val(data.uMoney);
                  	$("#shijian2").val(data.uInTime);  
                  	}else
                  	{
                  		console.log("用户不存在");
                  	}     				
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error:function(XMLHttpRequest, textStatus, errorThrown) {
                  //输出错误信息
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(XMLHttpRequest.responseText);
                  }
              });
          }
           //setInterval(aa,1000);
          userinfos({"init": 1});
          setInterval(function() {
              isLoaded && userinfos({"init": 0});
          }, 1500)
         
         //调用指纹
         $(function () {
              $("#zhiwen").click(
         		function(){//ID为test的元素点击时
         		var a=0;
         		//var b=0;
         	
      				a=zw(a);
      				//b++;
    		}
              
         )});
          function zw(a) {
          //var filename=$("#name1").val();
          	//var a=0;
			console.log("上传："+a);
              $.ajax({
                  type: 'POST',
                  data:  {'bz':a},
                  url: "UserinfoHandler/fingerprint",
                  timeout:40000,
					
                  beforeSend: function() {
                      isLoaded = false;
                  },
                  success: function(data) {
                  	a= parseInt(data);
                  	console.log(a);
                  	switch(a)
					{
					case 0:
					  	console.log('开始录入~');
                  		a++;
                  		//this.a=a;
                  		$("#zwshow").html("开始录入，请放上手指~");
                  		console.log(a);
					  break;
					case 1:
					  console.log('指纹录入成功，请再次放上手指~');
					  $("#zwshow").html("指纹录入成功，请再次放上手指~");
                  		a++;
					  break;
					case 2:
					  console.log('指纹录入成功~');
					   $("#zwshow").html("指纹录入成功~");
                  		a++;
					  break;
					 case 3:
					  console.log('录入成功~');
					  $("#zwshow").html("上传成功~");
                  		a++;
					  break;
					 case -1:
					  console.log('指纹录入失败，请再次放上手指~');
					  break;
					 case -2:
					 console.log('指纹录入失败，请再次放上手指2~');
					  break;
					 case -3:
					 console.log('失败~');
					  break;
					default:
					  console.log('错误~');
					}
					//递归调用
					if(a<4&&a>=0)
					{
					console.log('a：'+a);
					zw(a);
					}
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                      console.log('请求失败~');
                  }
              });
            	 console.log('a='+a);
              	return a;
              }
              
         //退宿
          $(function () {
              $("#retire").click(
          function ts(opts) {
              $.ajax({
                  type: 'POST',
                  url: "UserinfoHandler/delectUserinfo",
                  data:  {'uid':$("#uid2").val()},
                  timeout:3000,
                  beforeSend: function() {
                      isLoaded = false;
                  },
                  success: function(data) {
                     		console.log('删除成功~');
                     		
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                      console.log('请求失败~');
                  }
              });
          }
         )});
      </script>
      <!-- 样式 -->
      <style>

          *{
              margin: 0px;
              padding: 0;
          }

          .nav{
              list-style: none;
              width: 300px;
              margin: 0px auto;
              margin-left: 0px;

              /*border: 1px solid #000;*/
          }
          .nav2{
			list-style: none;
              width: 100px;
              margin: 0px auto;
              margin-left: 0px;

              /*border: 1px solid #000;*/
          }
          /*每行分割*/
          .nav>li{
              border: 1px solid #000;
              line-height: 35px;
              border-bottom: none;
              /*让菜单名有两个字的间隙*/
              text-indent: 2em;
              /*让菜单名靠左*/
              position: relative;
          }
           .nav2>li{
              border: 1px solid #000;
              line-height: 35px;
              border-bottom: none;
              /*让菜单名有两个字的间隙*/
              text-indent: 2em;
              /*让菜单名靠左*/
              position: relative;
          }
          .nav>li:last-child{
              border-bottom: 1px solid #000;
              border-bottom-right-radius:10px;
              border-bottom-left-radius:10px;
          }
          .nav>li:first-child{
              border-top-right-radius:10px;
              border-top-left-radius:10px;
          }
          .sub{
              display: none;
          }
          .sub>li{
              list-style: none;
              background: #a0bdff;
              border-bottom: 1px solid white;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
          }
          .sub2>li{
              list-style: none;
              background: #a0bdff;
              border-bottom: 1px solid white;
              border-left: 1px solid #000000;
              border-right: 1px solid #000000;
          }
          /*鼠标移动到上面事件*/
          .sub>li:hover{
              background: #97b1ff;
          }
          .sub2>li:hover{
              background: #97b1ff;
          }
          /*.nav>li>span{*/
          /*background: url("images/") no-repeat center center;
          display:inline-block;
          width:32px;
          height:32px;
          position:absolute;
          right:10px;
          top:5px;*/
          /*}*/
      </style>
      <!--  展开动画-->
      <script >
           
          var i=0;
          $(function () {

               for (var key in apartmentsmap) {
                  	var txt1 = $(" <li ><span>"+key+"号楼</span><ul class=\"sub\" id=\""+key+"\"></ul></li>");   // 以 jQuery 创建新元素
                  	$("ul[id^='ul1']").append(txt1);
                  	 
			       
			    }
			    for (var key in apartmentsmap) {
                  	 		//console.log(apartmentsmap[''+key+'']+"++++");
                  	 		var i=0
                  	 		
                  	 		while(i<apartmentsmap[''+key+''])
                  	 		{
                  	 		var floora=i+1;
		                  	var txt2 = $(" <li id=\""+key+"*"+floora+"\"><span>"+floora+"楼</span><ul class=\"sub2\" id=\""+key+"*"+floora+"\"></ul></li>");   // 以 jQuery 创建新元素
		                  	$("ul[id=\""+key+"\"]").append(txt2);
		                  
		                  		var ii=0;
		                  		//建button
		                  		
		                  		while(ii<roomNumber)
                  	 			{
                  	 			//console.log(ii);
                  	 			//console.log(roomjson[1].rFloor);
                  	 				if(roomjson[ii].rFloor==floora)
                  	 				{
                  	 					var txt3 = $(" <li id=\""+key+"*"+floora+"*"+roomjson[ii].rNum+"\"><span>"+roomjson[ii].rNum+"室</span><button id=\""+key+"*"+floora+"*"+roomjson[ii].rNum+"\">开</button></li>");   // 以 jQuery 创建新元素
		             
		                  				$("ul[id=\""+key+"*"+floora+"\"]").append(txt3);
                  	 				}
                  	 				ii++;
                  	 			}
                  	 			ii=0;
                  	 			
		                  	i++;
		                  	}
		                  	i=0;
			       
			   	 }
                i=0;

          });
          $(function () {
              //1.监听一级菜单的点击事件
              $(".nav>li").click( function () {
                  console.log($(this).children(".sub"));
                  //1.1拿到二级菜单
                  var $sub = $(this).children(".sub");

                  //1.2让二级菜单展开
                  $sub.slideToggle(1000);
              });
          });
      </script>
	<script>
		window.onload=function (ev)  {
            try{
                var btns = $('button');
                //循环遍历所有的按钮，一个一个添加事件绑定
                for (var i = 0; i < btns.length; ++i) {
                
                if(btns[i].id!="zhiwen"&&btns[i].id!="zhaopian"&&btns[i].id!="retire")
                {
                     //发送开门指令
            	btns[i].onclick=function rooms(ev1) {
            	var id1=this.id;
            	//console.log(id1);
              	$.ajax({
                  type: 'get',
                  url: "OpenLockHandler/openLock",
                  timeout:3000,
                  data: "id="+id1,
                  beforeSend: function() {
                      isLoaded = false;
                  },
                  success: function(data) {
                      console.log("成功");
                  },
                  //成功失败都调用
                  complete: function() {
                      isLoaded = true;
                  },
                  error: function() {
                      console.log('请求失败~');
                  }
              })
            }
                }
                }
            }
            catch (error) {
                alert(error);
            }
            
        }
       
       //提交表单
        $(function () {
            $("#tijiao").click(function () {
            	//var params =$("#yhxx").serializeArray();
            	//params = decodeURIComponent(params,true);
            	console.log($("#yhxx").serializeArray());
                $.ajax({
                    type: "post",
                    url: "UserinfoHandler/insertUserinfo",
                    data:  $("#yhxx").serializeArray(),
                    contentType:"application/x-www-form-urlencoded",
                    success: function (result) {
							console.log('表单提交成功~');
                    }
                });
 
                return false;
            });
        });
        
        
       
        
	</script>
	<!-- 获取当前时间 -->
	<script>
		$(function(){
		//每隔1s执行一次aa
		 setInterval(aa,1000);
		 function aa(){
		 	
		 	//console.log(("#shijian"));
		 	/**
 * 
 * 获取当前时间
 */
function getNow(s) {
    return s < 10 ? '0' + s: s;
}

var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate(); 
var h=myDate.getHours();       //获取当前小时数(0-23)
var m=myDate.getMinutes();     //获取当前分钟数(0-59)
var s=myDate.getSeconds();  

var now=year+'-'+getNow(month)+"-"+getNow(date)+" "+getNow(h)+':'+getNow(m)+":"+getNow(s);
		   $("#shijian").val(now);
		 }
		});
		
	</script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
	div#yhxxdiv{
		float:right;
	}
	</style>
  </head>
  
  <body>
  
  <ul class="nav" id="ul1">
  </ul>


    <form  id="yhxx">
    	姓	    名：<input id="name1"  name="uName" type="text" autofocus required="required"><br/>
    	客人类型<label class="single1"><input type="radio" name="uGenre" value="1" >临时型</label>
    	<label class="single1"><input type="radio" name="uGenre" value="2">长久型</label><br/>
    	性	    别：<label class="single"><input type="radio" name="uGender" value="1" />男</label>
		<label class="single2"><input type="radio" name="uGender" value="2" />女</label><br/>
    	身   份  证：<input name="uIdc" type="text" ><br/>
    	联系方式：<input name="uPhone" type="text"><br/>
    	备	     注：<input name="uRemark" type="text"><br/>
    	<!--入住时间：--><input id="shijian" name="uInTime"  style="display:none" >
    	 房间 :<input id="room1" name="roomName" type="text" ><br/>
    	  交钱数 :<input name="uMoney" type="text" ><br/>
    	  <p id="zwshow"></p>
  		<button id="zhiwen">指纹录入</button><br/>
    	<input id="tijiao" name="tijiao" type="submit" value="提交">
    </form>
      <script>
    $("#yhxx").submit(function(data) { 
   			return false; //阻止默认行为，提交表单
	});
	</script>
	
	<div id="yhxxdiv">
    <form  id="yhxx2">
    	姓	    名：<input id="uName2"  name="uName" type="text" readonly><br/>
    	客人类型<label class="single2"><input id="uGenre2" type="radio" name="uGenre" value="1" disabled>临时型</label>
    	<label class="single2"><input id="uGenre2" type="radio" name="uGenre" value="2" disabled>长久型</label><br/>
    	性	    别：<label class="single2"><input id="uGender2" type="radio" name="uGender" value="1" disabled/>男</label>
		<label class="single2"><input id="uGender2" type="radio" name="uGender" value="2" disabled/>女</label><br/>
    	身   份  证：<input id="uIdc2" name="uIdc" type="text" readonly><br/>
    	联系方式：<input id="uPhone2" name="uPhone" type="text" readonly><br/>
    	备	     注：<input id="uRemark2" name="uRemark" type="text" readonly><br/>
    	入住时间：<input id="shijian2" name="uInTime"  readonly ><br/>
    	 房间 :<input id="room2" name="roomName" type="text" readonly><br/>
    	  交钱数 :<input id="uMoney2" name="uMoney" type="text" readonly><br/>
    	  <input id="uid2"  name="uid" type="text" ><br/>
    	<button id="retire">退宿</button><br/>
    </form>
  </div>
  <div>
  	
  </div>
  <div>
  	<a href='ImgHandler/oneMonitor/20205/2018_03_12'><img alt="查看照片" src="./img/chakan.png"> </a>
  </div>
  </body>
</html>
